<!-- 订单管理 -->
<template>
  <div
    class="dashboard-container order-list customer-list-box"
    style="padding: 0 30px"
  >
    <!--    订单管理 -->
    <el-card>
      <el-form :model="orderForm" label-width="100px">
        <el-row type="flex" justify="space-between">
          <el-col style="padding: 0 30px">
            <el-form-item label="订单编号：" style="height: 40px">
              <el-input
                v-model="orderForm.id"
                placeholder="请输入订单编号"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="padding: 0 30px">
            <el-form-item label="订单状态：">
              <el-select
                v-model="orderForm.status"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="padding: 0 30px">
            <el-form-item label="付费状态：">
              <el-select
                v-model="orderForm.paymentStatus"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in paymentStatus"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col style="padding: 0 30px">
            <el-form-item label="发件人姓名：" style="height: 40px">
              <el-input
                v-model="orderForm.senderName"
                placeholder="请输入发件人姓名"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="padding: 0 30px">
            <el-form-item label="发件人电话：">
              <el-input
                v-model="orderForm.senderPhone"
                placeholder="请输入发件人电话"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="padding: 0 30px">
            <el-form-item label="发件人地址：">
              <div class="select-wrapper">
                <el-select
                  v-model="orderForm.senderProvinceId"
                  placeholder="请选择省"
                  style="width: 30%"
                  @change="changeProvince"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  />
                </el-select>
                <el-select
                  v-model="orderForm.senderCityId"
                  placeholder="请选择市"
                  style="width: 30%"
                  @change="changeCity"
                >
                  <el-option
                    v-for="item in senderCityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="orderForm.senderCountyId"
                  placeholder="请选择区"
                  style="width: 30%"
                >
                  <el-option
                    v-for="item in senderAreaList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col style="padding: 0 30px">
            <el-form-item label="收件人姓名：" style="height: 40px">
              <el-input
                v-model="orderForm.receiverName"
                placeholder="请输入收件人姓名"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="padding: 0 30px">
            <el-form-item label="收件人电话：">
              <el-input
                v-model="orderForm.receiverPhone"
                placeholder="请输入收件人电话"
                style="width: 100%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="padding: 0 30px">
            <el-form-item label="收件人地址：">
              <div class="select-wrapper">
                <el-select
                  v-model="orderForm.receiverProvinceId"
                  placeholder="请选择省"
                  style="width: 30%"
                  @change="changeReceiveProvince"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="orderForm.receiverCityId"
                  placeholder="请选择市"
                  style="width: 30%"
                  @change="changeReceiveCity"
                >
                  <el-option
                    v-for="item in receiverCityList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="orderForm.receiverCountyId"
                  placeholder="请选择区"
                  style="width: 30%"
                >
                  <el-option
                    v-for="item in receiverAreaList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button
              type="primary"
              style="background: #e15536"
              @click="search"
              >搜索</el-button
            >
            <el-button @click="clearList">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="order-list">
      <el-table size="mini" :data="list">
        <el-table-column type="index" fixed label="序号" width="80">
        </el-table-column>
        <el-table-column prop="id" label="订单编号" width="190">
        </el-table-column>
        <el-table-column prop="transportOrder.id" label="运单编号" width="190">
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="150">
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="120">
        </el-table-column>
        <el-table-column prop="senderName" label="发件人姓名" width="120">
        </el-table-column>
        <el-table-column prop="senderPhone" label="发件人电话" width="130">
        </el-table-column>
        <el-table-column label="发件人地址" width="130">
          <template slot-scope="scope">
            <span>
              {{ scope.row.senderProvince.name }}
              {{ scope.row.senderCity.name }}
              {{ scope.row.senderCounty.name }}
              {{ scope.row.senderAddress }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="receiverName" label="收件人姓名" width="120">
        </el-table-column>
        <el-table-column prop="receiverPhone" label="收件人电话" width="130">
        </el-table-column>
        <el-table-column label="收件人地址" width="200">
          <template slot-scope="scope">
            <span>
              {{ scope.row.receiverProvince.name }}
              {{ scope.row.receiverCity.name }}
              {{ scope.row.receiverCounty.name }}
              {{ scope.row.receiverAddress }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="pickupType" label="取件类型" width="120">
          <template v-slot="{ row }">
            {{ transpickupType(row.pickupType) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="付费类型" width="120">
          <template v-slot="{ row }">
            {{ transpaymentMethod(row.paymentMethod) }}
          </template>
        </el-table-column>
        <el-table-column prop="paymentStatus" label="付费状态" width="100">
          <template v-slot="{ row }">
            {{ transpaymentStatus(row.paymentStatus) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template v-slot="{ row }">
            <el-button type="text" size="small" @click="toDetail(row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-bottom:100px ">
        <div style="display:flex;justify-content:center">
          <el-pagination
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { orderList } from '@/api/order'
import { areaList } from '@/api/common'
export default {
  name: 'OrderIndex',
  data() {
    return {
      list: [],
      // 获取省列表
      provinceList: [],
      // 寄件人城市列表
      senderCityList: [],
      // 寄件人区列表
      senderAreaList: [],
      // 收件人城市列表
      receiverCityList: [],
      // 收件人区列表
      receiverAreaList: [],
      // 订单列表的数据  双向绑定的数据
      orderForm: {
        page: 1,
        pageSize: 10,
        // 订单编号(不确定)
        id: '',
        // 订单状态
        status: '',
        // 付费状态
        paymentStatus: '',
        // 发件人名字
        senderName: '',
        // 发件人电话
        senderPhone: '',
        // 发件人省
        senderProvinceId: '',
        // 发件人市
        senderCityId: '',
        // 发件人区
        senderCountyId: '',
        // 收件人名字
        receiverName: '',
        // 收件人电话
        receiverPhone: '',
        // 收件人省
        receiverProvinceId: '',
        // 收件人市
        receiverCityId: '',
        // 收件人区
        receiverCountyId: ''
      },
      // 订单状态列表
      statusList: [
        {
          id: 23000,
          name: '待取件'
        },
        {
          id: 23001,
          name: '已取件'
        },
        {
          id: 23005,
          name: '运输中'
        },
        {
          id: 23008,
          name: '派送中'
        },
        {
          id: 23009,
          name: '已签收'
        },
        {
          id: 23010,
          name: '拒收'
        },
        {
          id: 230011,
          name: '已取消'
        },
        {
          id: 0,
          name: '全部'
        }
      ],
      paymentStatus: [{ id: 1, name: '未付' }, { id: 2, name: '已付' }],
      // 获取数据的总条数
      total: null,
      // 当前页
      currentPage: 1,
      pageSize: 10
    }
  },
  created() {
    this.orderList()
    //  调用省份的接口
    this.getProvince()
  },
  methods: {
    // 重置的函数
    clearList() {
      this.showList = true
      this.orderForm.id = ''
      this.orderForm.status = ''
      this.orderForm.paymentStatus = ''
      this.orderForm.senderName = ''
      this.orderForm.senderPhone = ''
      this.orderForm.senderProvinceId = ''
      this.orderForm.senderCityId = ''
      this.orderForm.senderCountyId = ''
      this.orderForm.receiverName = ''
      this.orderForm.receiverPhone = ''
      this.orderForm.receiverProvinceId = ''
      this.orderForm.receiverCityId = ''
      this.orderForm.receiverCountyId = ''
      this.orderList()
    },
    // 获取订单分页详情
    async orderList() {
      const res = await orderList({ page: 1, pageSize: 10 })
      // console.log(res.data)
      // 调出来的接口数据 赋值给新list
      this.list = res.data.items
      this.total = +res.data.counts
    },
    // 调用省份的接口
    async getProvince() {
      const rs = await areaList()
      // console.log('rs', rs)
      this.provinceList = rs.data
    },
    // 更改发省份的信息
    async changeProvince(value) {
      // console.log(value)
      const rs = await areaList({ parentId: value })
      // console.log(rs)
      this.senderCityList = rs.data
      // this.receiverCityList = rs.data
    },
    // 更改发城市的信息
    async changeCity(value) {
      const rs = await areaList({ parentId: value })
      this.senderAreaList = rs.data
      // this.receiverAreaList = rs.data
    },
    // 更改收件人的省份信息
    async changeReceiveProvince(value) {
      const rs = await areaList({ parentId: value })
      this.receiverCityList = rs.data
    },
    // 更改收件人城市的信息
    async changeReceiveCity(value) {
      const rs = await areaList({ parentId: value })
      this.receiverAreaList = rs.data
    },
    // 搜索的操作
    async search() {
      // 通过所选的调接口
      const rs = await orderList(this.orderForm)
      // console.log(rs)
      this.list = rs.data.items
      this.total = +rs.data.counts
    },

    // 路由跳转到详情页
    toDetail(row) {
      this.$router.push({
        path: 'edit-order',
        query: {
          //query是个配置项
          orderId: row.id
        }
      })
    },
    // 分页器的功能的函数
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      const res = await orderList({ page: val, pageSize: this.pageSize })
      this.list = res.data.items
    },
    // 分页器的功能
    async handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      const res = await orderList({ page: this.currentPage, pageSize: val })
      this.pageSize = val
      // console.log(res)
      this.list = res.data.items
    },
    // 取件类型的函数
    transpickupType(value) {
      if (value === 1) {
        return '网点自寄'
      } else if (value === 2) {
        return '上门取件'
      }
    },
    // 转换付款方式的函数
    transpaymentMethod(value) {
      if (value === 1) {
        return '预结'
      } else if (value === 2) {
        return '到付'
      }
    },
    // 转换付款状态的函数
    transpaymentStatus(value) {
      if (value === 1) {
        return '未付'
      } else if (value === 2) {
        return '已付'
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.order-list {
  font-size: 13px;
  margin-top: 20px;
}

.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
